<!--
* 用户界面
*
* @author lotswn
* @version 1.0
-->
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>用户管理</title>
    <link rel="stylesheet" href="../component/pear/css/pear.css" />
    <style>
        .expand.pear-btn:hover {
            color: currentColor;
            background-color: unset;
        }
        .expand.pear-btn {
            border: 1px solid rgb(255 255 255 / 0%)
        }
    </style>
</head>

<body class="pear-container">
<div class="layui-card">
    <div class="layui-card-body">
    <form id="userForm" class="layui-form" action="">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label" >用户名</label>
                <div class="layui-input-inline">
                    <input type="text" id = "searchName" placeholder="用户名" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label"  >权限级别</label>
                <div class="layui-input-inline">
                    <select name="status" id = "searchAuth" value="">
                        <option value="">请选择用户级别</option>
                        <option value="0">普通用户</option>
                        <option value="1">管理员</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label"  >部门编号</label>
                <div class="layui-input-inline">
                    <input type="text" id = "searchDepart" placeholder="部门编号" class="layui-input">
                </div>
            </div>
            <div class="layui-inline" style="margin-left: 50px;">
                <a class="pear-btn pear-btn-md pear-btn-primary"  id = "searchVal">
                    <i class="layui-icon layui-icon-search"></i>
                    查询
                </a>
                <a type="reset" class="pear-btn pear-btn-md" id = "iReset">
                    <i class="layui-icon layui-icon-refresh"></i>
                    重置
                </a>
                <button type="button" class="pear-btn pear-btn-md expand">
                </button>
            </div>
        </div>
    </form>
    </div>
</div>
<div class="layui-card">
    <div class="layui-card-body">
        <table class = "layui-hide" id="user-table" lay-filter="user-table"></table>
    </div>
</div>

<!--头部工具栏-->
<script type="text/html" id="user-toolbar">
    <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
        <i class="layui-icon layui-icon-add-1"></i>
        新增
    </button>
    <button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchDelete">
        <i class="layui-icon layui-icon-delete"></i>
        注销
    </button>
</script>
<!--行工具栏-->
<script type="text/html" id="user-bar">
    <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i
            class="layui-icon layui-icon-edit"></i></button>
    <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="del"><i
            class="layui-icon layui-icon-delete"></i></button>
    <!--    <button class="pear-btn pear-btn-sm" id="more_{{d.userId}}"><i class="layui-icon layui-icon-triangle-d"></i></button>-->
</script>

<!--<script type="text/html" id="user-enable">-->
<!--    <input type="checkbox" name="enable" value="{{d.id}}" lay-skin="switch" lay-text="授权|禁用" lay-filter="user-enable"-->
<!--           checked="{{ d.enable == 0 ? 'true' : 'false' }}">-->
<!--</script>-->

<script type="text/html" id="user-sex">
    {{#if (d.sex == 1) { }}
    <span>男</span>
    {{# }else if(d.sex == 2){ }}
    <span>女</span>
    {{# } }}
</script>

<script type="text/html" id="user-login">
    {{#if (d.login == 0) { }}
    <span>在线</span>
    {{# }else if(d.sex == 1){ }}
    <span>离线</span>
    {{# } }}
</script>

<div style="display: none;" id = "user-edit">
<!--    <div class="layer-top" style=" height: 400px; ">-->
        <form class="layui-form" action="" lay-filter = "edit">
        <div class="mainBox">
            <div class="main-container">
                <div class="layui-form-item">
                    <label class="layui-form-label"> 用户名 </label>
                    <div class="layui-input-block">
                        <input type="text" id="update_username"  lay-verify="title" autocomplete="off"
                               placeholder="" class="layui-input" readonly>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"> 联系电话 </label>
                    <div class="layui-input-block">
                        <input type="text" id="update_phone" lay-verify="title" autocomplete="off" placeholder="请输入联系电话"
                               class="layui-input" >
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"> 部门编号 </label>
                    <div class="layui-input-block">
                        <input type="text" id="update_departid" lay-verify="title"
                               autocomplete="off" placeholder="请输入部门编号" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item" id ="update_auth" style="display: inline-block">
                    <label class="layui-form-label"> 权限管理 </label>
                    <div class="layui-input-block" >
                        <input type="radio" id = "manage0" name="manager" value="1" title="普通用户">
                        <input type="radio" id = "manage1" name="manager" value="1" title="管理员" >
                    </div>
                </div>
            </div>
        </div>
        </form>
    <script>
        $('.layui-form-radio').on('click',function () {
            layui.use(['table', 'drawer','form'], function() {
                var form = layui.form;
                form.render('radio')
                var name = $(this).prev().attr("name");
                $('input[name='+name+']').attr("checked",false)
                $(this).prev().attr('checked',"checked");
                form.render('radio')
            });
        });
    </script>
<!--    </div>-->
<!--        <script src="../../component/layui/layui.js"></script>-->
</div>
<script src="../component/layui/layui.js"></script>
<script src="../component/pear/pear.js"></script>
<script src="../component/jquery/jquery-3.6.0.js" charset="utf-8"></script>

<script>
    $("#iReset").click(function () {
        $("#searchName").val("");
        $("#searchAuth").val("");
        $("#searchDepart").val("");
        layui.form.render('select');
        tableFlush();
    });

    $("#searchVal").click(function () {
        let searchName = $("#searchName").val();
        let searchAuth = $("#searchAuth").val();
        let searchDepart = $("#searchDepart").val();
        tableFlush(searchName, searchAuth,searchDepart);
    });


    function tableFlush(searchName,searchAuth,searchDepart) {
        let search_json = {};
        if(searchName != null && searchName != '') {
            search_json.username = searchName;
        }
        if(searchAuth != null && searchAuth != '') {
                search_json.auth = searchAuth;
        }
        if(searchDepart != null && searchDepart != '') {
            search_json.departmentid = searchDepart;
        }
        console.log(searchAuth);
        layui.use(['table', 'drawer','form'], function(){
            var table = layui.table;
            let drawer = layui.drawer;
            let form = layui.form;

            table.render({
                elem: '#user-table'
                ,url: '/user/selectByPage'
                ,where: search_json                // 追加搜索条件
                ,toolbar: '#user-toolbar' //开启头部工具栏，并为其绑定左侧模板
                ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                    title: '提示'
                    ,layEvent: 'LAYTABLE_TIPS'
                    ,icon: 'layui-icon-tips'
                }]
                ,title: '用户数据表'
                ,cols: [[
                    {type: 'checkbox', fixed: 'left'}
                    ,{field:'id', title:'ID', width:80, unresize: true, templet: function(res){
                            return '<em>'+ res.id +'</em>'
                        }}
                    ,{field:'username', title:'用户名', width:120, templet: function(res){
                            return '<em>'+ res.username +'</em>'
                        }}
                    ,{field:'userphone', title:'联系电话', width:180, templet: function(res){
                            return '<em>'+ res.userphone +'</em>'
                        }}
                    ,{field:'departmentid', title:'部门编号', width:180, templet: function(res){
                            return '<em>'+ res.departmentid +'</em>'
                        }}
                    ,{field:'auth', title:'权限级别', width:150, templet: function(res){

                            if(res.auth === 1)
                                return '<em>'+ "管理员" +'</em>'
                            else if(res.auth === 0)
                                return '<em>'+ "普通用户" +'</em>'
                            else if(res.auth === 2)
                                return '<em>'+ "超级管理员" +'</em>'
                            else
                                return '<em>'+ "未知用户" +'</em>'
                            // return '<em>'+ res.auth +'</em>'
                        }}
                    ,{field:'registertime', title:'注册时间', width:150, templet: function(res){
                            return '<em>'+ layui.util.toDateString(res.registertime, 'yyyy-MM-dd') +'</em>'
                        }}
                    ,{fixed: 'right', title:'操作', toolbar: '#user-bar', width:150}
                ]]
                ,page: true
            });

            //监听行工具事件
            table.on('tool(user-table)', function(obj) {
                if (obj.event === 'del' && obj.data.username != 'admin') {
                    window.delete(obj);
                } else if (obj.event === 'edit' && obj.data.username != 'admin') {
                    window.edit(obj);
                }
            });

            //监听头工具事件
            table.on('toolbar(user-table)', function (obj) {
                if (obj.event === 'add') {
                    window.add();
                } else if (obj.event === 'refresh') {
                    window.refresh();
                } else if (obj.event === 'batchDelete') {
                    window.batchDelete(obj);
                }
            });


            window.delete = function(obj) {
                var data = obj.data;
                layer.confirm('确认注销所选用户', function(index){
                    $.ajax({
                        url:"/user/deleteById",       // 请求路径
                        type:"post",                  // 请求的方式，不区分大小写
                        cache:false,                  // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
                        data: {
                            id:data.id
                        },
                        datatype:"json",             // 返回类型，text文本、html页面、json数据
                        success:function(response){
                            console.log("返回: " + response);
                            if(response.code === 200) {
                                layer.msg("删除用户成功!");
                                layer.close(index);                         // 关闭当前窗口
                                tableFlush();
                            }
                        },
                        error:function(response){
                            console.log("出错返回: " + response);
                        }
                    });
                });
            }
            window.batchDelete = function (obj){
                let data = table.checkStatus(obj.config.id).data;
                if (data.length === 0) {
                    layer.msg("未选中数据", {
                        icon: 3,
                        time: 1000
                    });
                    return false;
                }
                let ids = "";
                for (let i = 0; i < data.length; i++) {
                    if(data[i].username!='admin')
                        ids += data[i].id + ",";
                }
                // ids = ids.substr(0, ids.length - 1);
                layer.confirm('确定要删除这些用户', {
                    icon: 3,
                    title: '提示'
                }, function (index) {
                    // layer.close(index);
                    $.ajax({
                        url:"/user/batchDeleteByIds",       // 请求路径
                        type:"post",                  // 请求的方式，不区分大小写
                        cache:false,                  // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
                        data: {
                            ids:ids
                        },
                        datatype:"json",             // 返回类型，text文本、html页面、json数据
                        success:function(response){
                            console.log("返回: " + response);
                            if(response.code === 200) {
                                layer.msg("删除用户成功!");
                                layer.close(index);                         // 关闭当前窗口
                                tableFlush();
                            }
                        },
                        error:function(response){
                            console.log("出错返回: " + response);
                        }
                    })
                });
            }
            window.add = function() {
                layer.open({
                    type: 2,
                    title: '新增用户',
                    shade: 0.1,
                    area: ['500px', '400px'],
                    moveType: 1, //拖拽模式，0或者1
                    content: 'operate/adduser.html'
                });
            }

            window.edit = function (obj) {
                var data = obj.data;
                layer.open({
                    type: 0,
                    title: '用户修改',
                    area: ['500px', '400px'],
                    id: 'LAY_layuipro', //设定一个id，防止重复弹出
                    shade: 0.5,
                    btn: ['更新', '取消'],
                    closeBtn: false,
                    btnAlign: 'c',
                    moveType: 1, //拖拽模式，0或者1
                    content: $('#user-edit').html(),         // 引入自定义表单
                    btn1: function(index, layero){            // 这个是新增按钮点击事件
                    // layer.msg("新增按钮执行");
                    let id = data.id;
                    let username = data.username;
                    let userphone = layero.find("#update_phone").val();
                    let departmentid = layero.find("#update_departid").val();
                    let auth
                    if(layero.find("input[id='manage0']:checked").val() === '1') auth = 0;
                    else  auth = 1;
                    $.ajax({
                        url:"/user/updateById",           // 请求路径
                        type:"post",                  // 请求的方式，不区分大小写
                        cache:false,                  // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
                        contentType:"application/json;charset=utf-8",
                        data: JSON.stringify({
                            "id":id,
                            "username":username,
                            "userphone":userphone,
                            "departmentid":departmentid,
                            "auth":auth
                        }),
                        datatype:"json",        // 返回类型，text文本、html页面、json数据
                        success:function(response){
                            console.log("返回: " + response);
                            if(response.code === 200) {
                                layer.msg("更新用户成功!");
                                layer.close(index);                         // 关闭当前窗口
                                tableFlush();
                            }
                        },
                        error:function(response){
                            console.log("出错返回: " + response);
                        }
                    });
                },
                success: function(layero){
                        layero.find("#update_username").val(data.username)
                        layero.find("#update_phone").val(data.userphone)
                        layero.find("#update_departid").val(data.departmentid)
                        if(data.auth === '管理员')
                            data.auth = 1
                        else if(data.auth === '普通用户')
                            data.auth = 0
                        layero.find("#manage"+data.auth).prop('checked',"checked")
                        console.log(layero.find("#manage0").val())
                        form.render('radio','edit');
                    }
                });
            }


        });
    }

    tableFlush();
</script>
</body>

</html>